<template>
  <div class="main">
    <div class="title">
      <div class="blue"></div>
      <div class="name">企业污染排放情况</div>
    </div>
    <!-- 新增图表容器 -->
    <div class="chart-container" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        grid: {
          left: '20%',
          right: '10%',
          top: '15%',
          bottom: '15%'
        },
        xAxis: {
          type: 'value',
          max: 100,
          axisLabel: { color: '#fff' },
          axisLine: { show: false },    // 隐藏x轴轴线
          splitLine: { show: false }    // 隐藏纵向网格线
        },
        yAxis: {
          type: 'category',
          data: ['铬污染', '铅污染', '废水企业', '废气企业', '企业总数'], // 倒序排列
          axisLabel: { color: '#fff' }
        },
        series: [
          {
            type: 'bar',
            data: [100, 100, 100, 100, 100], // 背景条
            barWidth: 12,
            itemStyle: {
              color: 'rgba(255,255,255,0.2)',
              borderRadius: 10
            },
            barGap: '-100%', // 将背景条移到主数据条后面
            z: 1
          },
          {
            type: 'bar',
            data: [20, 30, 45, 60, 85],
            label: {
              show: true,
              position: 'right',
              color: '#fff',
              fontSize: 12,
              formatter: '{c}' // 使用数据值作为显示内容
            },
            itemStyle: {
              borderRadius: 10,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#2d8cf0' },
                { offset: 1, color: '#19be6b' }
              ])
            },
            barWidth: 12,
            z: 2
          }
        ]
      };
      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.main {
  height: 28vh;
  width: 25%;
  background-color: #0d2b55;
  margin-top: 5px;
  margin-left: 10px;
  cursor: pointer;
}

.main .title {
  height: 11%;
  width: 100%;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue {
  background-color: #2997e4;
  width: 1%;
  height: 25px;
}

.name {
  flex: 1;
  font-size: 17px;
  color: white;
}

.chart-container {
   height: calc(100% - 40px); 
   width: 45vh;
  /* margin-top: 10px; */
}
</style>